<template>
	<div class="production-dispatch">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addTask">新增派单</el-button>
				<el-input v-model="searchKeyword" placeholder="搜索工单/负责人" style="width: 200px; margin-left: 10px"
					clearable />
				<el-button type="success" @click="batchAssign" style="margin-left: 10px">批量指派</el-button>
			</div>

			<el-table :data="filteredTasks" style="width: 100%; margin-top: 20px" border stripe
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="taskId" label="任务编号" sortable></el-table-column>
				<el-table-column prop="workOrder" label="生产工单" sortable></el-table-column>
				<el-table-column prop="processName" label="工序名称" sortable></el-table-column>
				<el-table-column prop="assignee" label="负责人" sortable></el-table-column>
				<el-table-column prop="status" label="状态" sortable>
					<template #default="scope">
						<el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">{{ scope.row.status
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editTask(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteTask(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="派单任务" width="500px">
			<el-form :model="currentTask" label-width="100px">
				<el-form-item label="任务编号">
					<el-input v-model="currentTask.taskId" />
				</el-form-item>
				<el-form-item label="生产工单">
					<el-input v-model="currentTask.workOrder" />
				</el-form-item>
				<el-form-item label="工序名称">
					<el-input v-model="currentTask.processName" />
				</el-form-item>
				<el-form-item label="负责人">
					<el-input v-model="currentTask.assignee" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveTask">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const tasks = ref([
	{ taskId: 'TASK202405001', workOrder: 'WO1001', processName: '制剂分装', assignee: '张三', status: '进行中' },
	{ taskId: 'TASK202405002', workOrder: 'WO1002', processName: '包装', assignee: '李四', status: '已完成' },
	{ taskId: 'TASK202405003', workOrder: 'WO1003', processName: '质检', assignee: '王五', status: '进行中' },
	{ taskId: 'TASK202405004', workOrder: 'WO1004', processName: '贴标', assignee: '赵六', status: '已完成' },
	{ taskId: 'TASK202405005', workOrder: 'WO1005', processName: '称重', assignee: '钱七', status: '进行中' },
	{ taskId: 'TASK202405006', workOrder: 'WO1006', processName: '混合', assignee: '孙八', status: '进行中' },
	{ taskId: 'TASK202405007', workOrder: 'WO1007', processName: '分装', assignee: '周九', status: '已完成' },
	{ taskId: 'TASK202405008', workOrder: 'WO1008', processName: '封口', assignee: '吴十', status: '进行中' },
	{ taskId: 'TASK202405009', workOrder: 'WO1009', processName: '灭菌', assignee: '郑十一', status: '进行中' },
	{ taskId: 'TASK202405010', workOrder: 'WO1010', processName: '质检', assignee: '王十二', status: '已完成' },
	{ taskId: 'TASK202405011', workOrder: 'WO1011', processName: '包装', assignee: '李十三', status: '进行中' },
	{ taskId: 'TASK202405012', workOrder: 'WO1012', processName: '称重', assignee: '赵十四', status: '已完成' },
	{ taskId: 'TASK202405013', workOrder: 'WO1013', processName: '制剂分装', assignee: '孙十五', status: '进行中' },
	{ taskId: 'TASK202405014', workOrder: 'WO1014', processName: '混合', assignee: '周十六', status: '已完成' },
	{ taskId: 'TASK202405015', workOrder: 'WO1015', processName: '灭菌', assignee: '郑十七', status: '进行中' },
])

const searchKeyword = ref('')
const selectedTasks = ref([])
const dialogVisible = ref(false)
const currentTask = ref({})

// 过滤搜索
const filteredTasks = computed(() =>
	tasks.value.filter(t =>
		t.workOrder.includes(searchKeyword.value) || t.assignee.includes(searchKeyword.value)
	)
)

// 多选处理
const handleSelectionChange = (val) => {
	selectedTasks.value = val
}

// 新增任务
const addTask = () => {
	currentTask.value = { taskId: '', workOrder: '', processName: '', assignee: '', status: '进行中' }
	dialogVisible.value = true
}

// 编辑任务
const editTask = (row) => {
	currentTask.value = { ...row }
	dialogVisible.value = true
}

// 保存任务
const saveTask = () => {
	if (!currentTask.value.taskId || !currentTask.value.workOrder) {
		ElMessage.error('任务编号和生产工单不能为空')
		return
	}
	const index = tasks.value.findIndex(t => t.taskId === currentTask.value.taskId)
	if (index >= 0) {
		tasks.value[index] = { ...currentTask.value }
		ElMessage.success('任务已更新')
	} else {
		tasks.value.push({ ...currentTask.value })
		ElMessage.success('任务已新增')
	}
	dialogVisible.value = false
}

// 删除任务
const deleteTask = (row) => {
	ElMessageBox.confirm('确认删除该任务吗？', '提示', { type: 'warning' })
		.then(() => {
			tasks.value = tasks.value.filter(t => t.taskId !== row.taskId)
			ElMessage.success('任务已删除')
		})
		.catch(() => { })
}

// 批量指派
const batchAssign = () => {
	if (selectedTasks.value.length === 0) {
		ElMessage.warning('请先选择任务')
		return
	}
	ElMessage.success(`已批量指派 ${selectedTasks.value.length} 个任务`)
}
</script>

<style scoped>
.production-dispatch .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
